<template>
  <section class="transfer">
    <el-dialog width="55%" :visible.sync="isShow2" :fullscreen="fullscreen" :show-close="false" top="40px" :before-close="beforeClose" >
      <el-row slot="title">
        <el-col :span="10" style="padding-top: 5px">
          <span>选择审批人</span>
        </el-col>
        <el-col :span="2" :offset="11">
          <el-button type="text" v-if="!fullscreen" icon="iconfont ali-quanping" @click="fullscreen = true" style="float: right"></el-button>
          <el-button type="text" v-else icon="iconfont ali-zuixiaohua" @click="fullscreen = false" style="float: right"></el-button>
        </el-col>
        <el-col :span="1">
          <el-button type="text" icon="iconfont ali-guanbi" @click="parentCloseEvent" style="float: right"></el-button>
        </el-col>
      </el-row>
      <section>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="按组织架构" name="first">
              <Organize ref="organizeChild" :treeList="treeList" :userList="userList" @getData="getData"></Organize>
          </el-tab-pane>
          <el-tab-pane label="按小组" name="second">
              <Group ref="groupChild" :treeGroupList="treeGroupList" :userList="userList" @getData="getData"></Group>
          </el-tab-pane>
          <el-tab-pane label="按角色" name="third">
            <Role ref="roleChild" :treeRoleList="treeRoleList" :userList="userList" @getData="getData"></Role>
          </el-tab-pane>
        </el-tabs>
      </section>
      <section slot="footer" class="dialog-footer">
        <el-button type="primary" @click="saveObj">保 存</el-button>
        <el-button @click="parentCloseEvent">取 消</el-button>
      </section>
    </el-dialog>
  </section>
</template>
<script>
import { dept_listAll,group_listAll } from "@/api/group";
import { role_listAll } from "@/api/role";
import { formateGroupTree, formateRoleTree, GroupTree } from "@/utils/formate";
import Organize from "./organize";
import Group from "./group";
import Role from "./role";

export default {
  name: "addApproval",
  props: {
    isShow2: Boolean
  },
  components: {
    Organize,
    Group,
    Role
  },
  data() {
    return {
      fullscreen: false,
      treeGroupList:[],
      treeList: [],
      treeRoleList:[],
      userList: [],
      activeName: "first",
      defaultProps: {
        children: "children",
        label: "label"
      },
      tabName:""
    };
  },
  methods: {
    opensettingChild(){
      this.userList = []
      if (this.activeName == 'first') {
        this.getDeptsAndUsers();
      }
      if (this.activeName == 'second') {
        this.getGroupAndUsers();
      }
      if (this.activeName == 'third') {
        this.getRoleAndUsers();
      }
    },
    async getDeptsAndUsers() {
      let { data } = await dept_listAll({
        company_id: localStorage.getItem("companyId")
      });
      let formateTree = formateGroupTree(data.data.rows);
      this.treeList = formateTree;
    },
    async getGroupAndUsers() {
      let { data } = await group_listAll({
        company_id: localStorage.getItem("companyId")
      });
      let formateTree = GroupTree(data.data.rows);
      this.treeGroupList = formateTree;
    },
    async getRoleAndUsers() {
      let { data } = await role_listAll({
        company_id: localStorage.getItem("companyId")
      });
      let formateRole = formateRoleTree(data.data.rows);
      this.treeRoleList = formateRole;
    },
    handleClick(tab, event) {
      this.tabName = tab.name
      if (tab.name == 'first') {
        this.getDeptsAndUsers();
        // this.$refs.organizeChild.openTransfer();
      }
      if (tab.name == 'second') {
        this.getGroupAndUsers()
        // this.$refs.groupChild.openTransfer();
      }
      if (tab.name == 'third') {
        this.getRoleAndUsers()
        // this.$refs.roleChild.openTransfer();
      }
    },
    beforeClose(e) {
      this.$emit("closeTransfer2");
    },
    parentCloseEvent() {
      this.$emit("closeTransfer2");
    },
    getData(data){
      this.userList = data
    },
    saveObj() {
      //提交保存
      if (this.userList.length == 0) {
        this.$message.warning("请至少选择一位成员");
        return;
      }
      // if (this.tabName == 'first') {
      //   for (var i = 0; i < this.userList.length; i++) {
      //     this.$set(this.userList[i], "type_id", 3);
      //   }
      // } else if(this.tabName == 'second'){
      //   for (var i = 0; i < this.userList.length; i++) {
      //     this.$set(this.userList[i], "type_id", 2);
      //   }
      // } else {
      //   for (var i = 0; i < this.userList.length; i++) {
      //     this.$set(this.userList[i], "type_id", 3);
      //   }
      // }
      // if(this.tabName == 'third'){
      //   for (var i = 0; i < this.userList.length; i++) {
      //     this.$set(this.userList[i], "type_id", 1);
      //   }
      // }
      this.$emit("saveUsers2", this.userList);
    }
  },
  created() {
    
  }
};
</script>
<style lang="scss" scoped>
.tree_transfer {
  background-color: #f3f4f5;
  padding: 10px;
  border-radius: 5px;
  img {
    border-radius: 50%;
  }
}
._user {
  max-height: 450px;
  overflow: scroll;
}
.ali-wenjianjia1 {
  color: #b8e8ff;
}
</style>
